<template>
    <div class="loginView">
        <div class="topNav">登录</div>
        <div class="inputBox">
            <van-cell-group class="myCell">
                <i class="iconfont icon-shouji"></i>
                <van-field v-model="user.telephone" placeholder="请输入手机号" />
            </van-cell-group>
            <van-cell-group class="myCell">
                <i class="iconfont icon-suo"></i>
                <van-field v-model="user.code" placeholder="请输入验证码"><template #button>
                        <van-button :disabled='btnDisable' class="getCodeBtn" @click="getCode">{{getCodeText}}
                        </van-button>
                    </template></van-field>
            </van-cell-group>
        </div>
        <van-button class="loginBtn" size="large" @click="login">登录</van-button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                user: {
                    telephone: '',
                    code: ''
                },
                timer: null,
                getCodeText: '获取验证码',
                btnDisable: false
            }
        },
        methods: {
            // 获取验证码
            async getCode() {
                // 手机号校验
                if (!/^1[3456789]\d{9}$/.test(this.user.telephone)) {
                    return this.$toast.fail('请填写正确的手机号！');
                }
                this.getCodeTime()
                // 发送请求获取验证码
                let {
                    data
                } = await this.$http.get(`/sms/codes/${this.user.telephone}`)
                // 发送成功则提示用户
                if (data.message == 'OK') {
                    this.$toast.success('验证码已发送！')
                }
            },
            // 验证码按钮倒计时
            getCodeTime() {
                let num = 60
                this.getCodeText = num + '秒后，重新获取'
                this.btnDisable = true
                this.timer = setInterval(() => {
                    num--
                    this.getCodeText = num + '秒后，重新获取'
                    if (num == 0) {
                        clearInterval(this.timer)
                        this.getCodeText = '获取验证码'
                        this.btnDisable = false
                    }
                }, 1000);
            },
            // 登录
            async login() {
                // 表单校验
                if (!/^1[3456789]\d{9}$/.test(this.user.telephone)) {
                    return this.$toast.fail('请填写正确的手机号！');
                }
                if (this.user.code.length !== 6) {
                    return this.$toast.fail('请填写正确的验证码！')
                }
                // 提示正在登录
                this.$toast.loading({
                    duration: 0, // 持续时间，0表示持续展示不停止
                    forbidClick: true, // 是否禁止背景点击
                    message: '登录中...' // 提示消息
                })
                let data = null
                // 发送登录请求
                try {
                    data = await this.$http.post('/authorizations', {
                        mobile: this.user.telephone,
                        code: this.user.code
                    })
                    // 如果请求成功，将返回的令牌存到浏览器和Vuex中，提示登录成功并跳转
                    if (data.data.message == 'OK') {
                        // 浏览器存储
                        localStorage.setItem('token', data.data.data.token)
                        localStorage.setItem('refresh_token', data.data.data.refresh_token)
                        // vuex存储
                        this.$store.commit('changeToken', data.data.data.token)
                        this.$store.commit('changeRefeshToken', data.data.data.refresh_token)
                        // 提示成功
                        this.$toast.success('登录成功！')
                        // 跳转首页
                        this.$router.push('/')
                    }
                } catch (error) {
                    this.$toast.fail('登录失败！')
                }
            }
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
    }
</script>

<style lang="scss">
    .loginView {
        background: #f5f7f9;
        height: 100vh;

        .topNav {
            width: 375px;
            height: 64px;
            background-color: #3296fa;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 64px;
            font-family: '微软雅黑';
        }

        .myCell {
            display: flex;
            align-items: center;
            padding-left: 20px;
        }

        .getCodeBtn {
            height: 23px;
            background-color: #ededed;
            color: #666;
            font-size: 12px;
            border-radius: 12px;
            padding: 7px 10px;
        }

        .loginBtn {
            margin: 27px 12px 0px 16px;
            width: 347px;
            height: 44px;
            color: #fff;
            text-align: center;
            line-height: 44px;
            background-color: #6db4fb;
            border-radius: 5px;
        }
    }
</style>